import {memo} from "react";
import type {CSSProperties} from "react";
import MusicItemStyle from "./MusicCoverItemStyle";
import {useNavigate} from "react-router-dom";
import {getHourMineSecondBySecond} from "../../../utils/timeFormatting";
import {setMusicId2LocalStorage} from "../../../utils/projectFunction";
/**
 * 时间：2023年12月29日 15点33分
 * 组件说明
 *  用于关于歌曲封面展示的item
 *
 * props说明
 * coverUrl:歌曲封面路径
 * musicName：歌曲名称
 * sing：歌手名称
 * timer：歌曲时长,注意，这里传入的是一个秒数
 * isShowBottomBorder：是否显示底部边框
 * size: 封面大小,默认为150px，
 *  注意：我们这里的size不仅仅是控制封面的宽度和高度，
 *  也是控制整个盒子的高度，其字体和距离会相对变化
 * isShowMusicCover：是否显示底部封面
 */
type propsType={
  id?:number,
  coverUrl?:string,
  musicName?:string,
  singer?:string,
  singerId?:number,
  timer?:number,
  isShowBottomBorder?:boolean,
  size?:number,
  isShowMusicCover?:boolean,
  backgroundColor?:string,
  style?:CSSProperties
}
export default memo(function MusicItem(props:propsType) {
  const navigate=useNavigate();
  //音乐播放按钮
  function playBtn(){
    setMusicId2LocalStorage(props.id);
    navigate("/musicplayer");
  }
  return (
    <MusicItemStyle
      $size={props.size}
      $coverUrl={props.coverUrl}
      $backgroundColor={props.backgroundColor}
      $isShowBottomBorder={props.isShowBottomBorder}
      $isShowMusicCover={props.isShowMusicCover}
    >
        <div className="music-cover-box" style={props.style}>
          {/* 歌曲图片 */}
          <div className="music-cover-image">
            <div className="music-cover-mask">
              <span className="music-play-btn iconfont" onClick={playBtn}>&#xe624;</span>
            </div>
          </div>
        </div>
        <div className="music-info-box" >
          <div className="music-message-box">
            <div className="music-name"  onClick={()=>{
              navigate("/home/compositepages",{state:{type:1,id:props.id}})
            }} style={props.style}>{props.musicName}</div>
            <div className="music-sing" onClick={
              ()=>{navigate("/home/compositepages",{state:{type:4,id:props.singerId}})}
            } style={props.style}>{props.singer}</div>
          </div>
          <span className="music-timer">
            {getHourMineSecondBySecond(props.timer as number)}
          </span>
        </div>
    </MusicItemStyle>
  );
});
